/* 横 不能超出屏幕 */
html, body { height: 100%; width: 100%; overflow-x: hidden }

* { -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 0; margin: 0; padding: 0 }

div {
  display: block;
}

.main {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: aquamarine;
  overflow: hidden;
  /* display: flex; */
}

.map {
  margin: 200px 270px 0;
  width: 100px;
  height: 100px;
  border-radius: 0.3px;
  background-color: red;
}

.div-float {
  position: absolute;
  left: 80px;
  top: 60px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

/* .div-float::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid;
  transform: rotate(-56deg);
  background: linear-gradient(281deg, #D7D7D7 0%, rgba(206, 206, 206, 0) 100%);
  background-image: linear-gradient(127deg, rgba(206, 206, 206, 1), rgba(206, 206, 206, 0)) 1 1;

  transform:rotate3d(1, 1, 0, 60deg);
} */

.div-float-content {
  position: relative;
  /* height: 100%;
  width: 100%; */
  height: 100px;
  width: 100px;
  background-color: yellow;
  border: 1px solid #CECECE;
}

.div-float-canvas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
